<template>
  <div
    :class="{
      s1: type === 'large',
      s2: type === 'middle',
      s3: type === 'small',
      s4: type === 'goods',
      s5: type === 'show'
    }">
    <RouterLink
      :to="`/detail?goods_id=${styleVar.goods_id}`"
      target="_blank">
      <div class="figure">
        <img
          v-lazyload="styleVar.imgUrl"
          alt="" />
      </div>
      <h3
        class="title"
        v-if="styleVar.title">
        {{ styleVar.title }}
      </h3>
      <p
        class="desc"
        v-if="styleVar.desc">
        {{ styleVar.desc }}
      </p>
      <p
        class="price"
        v-if="styleVar.price">
        <span class="num">{{ styleVar.price }}</span>
        元
        <span v-if="styleVar.count">起</span>
        <del v-if="styleVar.discount">
          <span>{{ styleVar.discount }}</span>
          元
        </del>
      </p>
      <div
        class="thumbs"
        v-if="type === 'goods'">
        <ul
          class="thumbs-list"
          ref="thumb">
          <li
            v-for="(goods, i) of styleVar.goodsInfo"
            :key="goods.goodsInfo_id"
            @mouseenter="changeGoodsInfo(i)"
            :style="i === index ? border : ''">
            <img
              v-lazyload="goods.goods_image_path"
              alt=""
              style="width: 34px; height: 34px" />
          </li>
        </ul>
      </div>
    </RouterLink>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
const props = defineProps({
  type: String,
  msg: Object
})
const border = { border: '1px solid #ff6900' }
const index = ref<number>(0)
const thumb = ref<HTMLElement>()
const changeGoodsInfo = (i: number) => {
  index.value = i
}
const styleVar = computed(() => {
  return {
    type: props.type,
    imgUrl: props.msg!.imgUrl
      ? props.msg!.imgUrl
      : props.msg!.goodsInfo[index.value].goods_image_path,
    title: props.msg!.imgUrl
      ? props.msg!.title
      : `${props.msg!.goodsInfo[index.value].goods_name} ${
          props.msg!.goodsInfo[index.value].cphone_version_name
        }`,
    desc: props.msg!.desc,
    price: props.msg!.imgUrl
      ? props.msg!.price
      : props.msg!.goodsInfo[index.value].goods_price,
    discount: props.msg!.imgUrl
      ? props.msg!.discount
      : props.msg!.goodsInfo[index.value].goods_discount,
    count: props.msg!.count || false,
    goodsInfo: props.msg!.goodsInfo,
    goods_id: props.msg!.imgUrl
      ? props.msg!.goods_id
      : props.msg!.goodsInfo[index.value].goods_id
  }
})
</script>

<style lang="less" scoped>
del {
  margin-left: 0.5em;
  color: #b0b0b0;
}
.s1 {
  width: 234px;
  height: 614px;
  margin-left: 14px;
  img {
    height: 614px;
    width: 234px;
  }
}

.s2 {
  width: 234px;
  height: 300px;
  background: #fff;
  margin-left: 14px;
  margin-bottom: 14px;
  a {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0;
    .figure {
      margin: 0 auto 18px;
      width: 160px;
      height: 160px;
      img {
        width: 160px;
        height: 160px;
      }
    }

    .title {
      margin: 0 10px 2px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .desc {
      margin: 0 10px 10px;
      height: 18px;
      font-size: 12px;
      color: #b0b0b0;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .price {
      margin: 0 10px 14px;
      text-align: center;
      color: #ff6700;
    }
  }
}

.s3 {
  height: 93px;
  padding-top: 50px;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
  a {
    .figure {
      position: absolute;
      right: 20px;
      top: 32px;
      width: 80px;
      height: 80px;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .title {
      margin: -10px 110px 5px 30px;
      font-size: 14px;
      font-weight: 400;
    }
    .price {
      margin: 0 110px 0px 30px;
      font-size: 12px;
      color: #ff6700;
    }
  }
}

.s4 {
  position: relative;
  float: left;
  width: 296px;
  height: 430px;
  margin-right: 14px;
  margin-bottom: 14px;
  text-align: center;
  background: #fff;
  transition: box-shadow 0.5s linear;
  a {
    display: block;
    padding-top: 47px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    .figure {
      width: 200px;
      height: 200px;
      margin: 0 auto 16px;
      img {
        width: 200px;
        height: 200px;
      }
    }
    .title {
      margin: 0 auto;
      width: 230px;
      font-size: 14px;
      font-weight: 400;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .price {
      margin: 0 0 15px;
      color: #ff6700;
    }
    .thumbs {
      width: 100%;
      height: 37px;
      overflow: hidden;
      .thumbs-list {
        li {
          display: inline-block;
          width: 34px;
          height: 34px;
          margin: 0 4px;
          border: 1px solid #e0e0e0;
          cursor: pointer;
          transition: border-color 0.2s linear;
        }
      }
    }
  }
}
.s5 {
  a {
    &:hover {
      color: #ff6700;
    }
    .figure {
      width: 160px;
      height: 110px;
      margin: 0 auto 16px;
      text-align: center;
      img {
        width: 120px;
        height: 110px;
      }
    }
    .title {
      color: #333;
      margin: 0;
      line-height: 20px;
    }
    .price {
      margin: 0;
      line-height: 20px;
      color: #ff6700;
    }
  }
}
.s1:hover,
.s2:hover,
.s3:hover {
  transition: 0.3s;
  transform: translateY(-5px);
  box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2);
}

.s4:hover {
  box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2);
}
</style>
